<template>
  <div :class="{'mobile-create mobile-small-padding': showMobilePage}" class="commerce-supplier-create">
    <el-row class="commerce-supplier-form detail-row">
      <el-form ref="editSupplierFrom" :model="editSupplierFrom" :rules="editSupplierRules" :label-position="formAlign" class="lineHeightFlex" label-width="100px">
        <div class="form-box">
          <Title v-if="!pageType" title="基础信息" class="mb-16"/>
          <el-row :class="{'response-el-row': !pageType}" :type="!pageType?'flex':''">
            <el-col v-if="supplierId" :span="12" class="responsive-col-lg-8">
              <el-form-item label="供应商序号" prop="supplierNum">
                <el-input v-model.trim="editSupplierFrom.supplierNum" :disabled="Boolean(supplierId)" maxlength="10" name="supplierNum" type="text" placeholder="请输入供应商序号" size="small" @input="getData" />
                <el-tooltip class="item" effect="dark" placement="top">
                  <div slot="content" style="max-width:200px;">供应商序号系统自动生成</div>
                  <tipIcon is-diy class="hover-icon" style="font-size:15px;color:#ccc;cursor:pointer;"/>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="供应商名称" prop="supplierName">
                <el-input v-model.trim="editSupplierFrom.supplierName" :disabled="canEdit" maxlength="20" name="supplierName" type="text" placeholder="请输入供应商名称" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
              <el-form-item label="供应商名称（备注）" prop="remark" class="label-line">
                <el-input v-model.trim="editSupplierFrom.remark" maxlength="20" name="remark" type="text" placeholder="请输入供应商名称（备注）" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="是否签约" prop="isSign">
                <el-select v-model="editSupplierFrom.isSign" name="cooperationStatus" popper-class="global-select-down" size="small" clearable>
                  <el-option
                    v-for="item in isSignOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <Title v-if="!pageType" title="其他信息" class="mb-16"/>
          <el-row :class="{'response-el-row': !pageType}" :type="!pageType?'flex':''">
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="合同编号" prop="contactNum">
                <el-input v-model.trim="editSupplierFrom.contactNum" maxlength="20" name="contactNum" type="text" placeholder="请输入合同编号" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="联系人" prop="contactPerson">
                <el-input v-model.trim="editSupplierFrom.contactPerson" maxlength="20" name="contactPerson" type="text" placeholder="请输入联系人" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="联系方式" prop="contactTel">
                <el-input v-model.trim="editSupplierFrom.contactTel" maxlength="20" name="contactTel" type="text" placeholder="请输入联系方式" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="合作模式" prop="cooperationModel">
                <el-select v-model="editSupplierFrom.cooperationModel" name="cooperationModel" popper-class="global-select-down" size="small" clearable>
                  <el-option
                    v-for="item in cooperationModelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="合作状态" prop="cooperationStatus">
                <el-select v-model="editSupplierFrom.cooperationStatus" name="cooperationStatus" popper-class="global-select-down" size="small" clearable>
                  <el-option
                    v-for="item in cooperationStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="合作到期时间" prop="expireTime">
                <el-date-picker v-model="editSupplierFrom.expireTime" :clearable="true" :editable="false" type="date" size="small" format="yyyy/MM/dd" value-format="yyyy-MM-dd" placeholder="选择日期"/>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="进项税" prop="inputTax">
                <el-input
                  v-model="editSupplierFrom.inputTax"
                  name="inputTax"
                  type="text"
                  placeholder="请输入进项税"
                  size="small"
                  @input="keyupEvent($event, 'inputTax')"
                  @mousewheel.native.prevent>
                  <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="销项税" prop="outputTax">
                <el-input
                  v-model="editSupplierFrom.outputTax"
                  name="outputTax"
                  type="text"
                  placeholder="请输入销项税"
                  size="small"
                  @input="keyupEvent($event, 'outputTax')"
                  @mousewheel.native.prevent>
                  <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item label="订单模式" prop="orderModel">
                <el-select v-model="editSupplierFrom.orderModel" name="orderModel" popper-class="global-select-down" size="small" clearable>
                  <el-option
                    v-for="item in orderModelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="responsive-col-lg-8">
              <el-form-item :class="{ 'flex-start': !showMobilePage }" label="标签" prop="tag">
                <TagSelect v-model="editSupplierFrom.tag" :module-type="TAG_MODULES.COMMERCE_SUPPLIER" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-row>
    <fixed-pagination>
      <div class="center">
        <el-button :loading="loading" type="primary" size="small" class="submit-btn" style="height: 32px;" @click="toSave('editSupplierFrom')">保存</el-button>
        <el-button type="info" size="small" class="cancel-btn-style" style="height: 32px;" @click="toClear()">取消</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import { supplierAdd, supplierEdit, supplierInfo } from '@/api/commerce';
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { regNumberMax } from '@/utils/numFormat';
import { TAG_MODULES } from '@/utils/const';
import { hasRouteAuth } from '@/utils/permission';
import TagSelect from '@/components/Common/tagSelect';
import mobileCreate from '@/mixins/mobileCreate';
export default {
  components: { Title, TagSelect },
  mixins: [mobileCreate],
  props: {
    pageType: { // 如果值为 component 则这个页面作为组建使用
      type: String,
      default: ''
    }
  },
  data() {
    return {
      TAG_MODULES,
      editSupplierFrom: {
        supplierNum: '',
        supplierName: '',
        remark: '',
        contactPerson: '',
        contactTel: '',
        orderModel: '',
        cooperationModel: '',
        cooperationStatus: '',
        inputTax: null,
        outputTax: null,
        contactNum: '',
        expireTime: '',
        tag: [],
        isSign: null
      },
      orderModelOptions: [{
        value: 0,
        label: 'erp'
      }, {
        value: 1,
        label: '有赞分销'
      }],
      cooperationModelOptions: [{
        value: 0,
        label: '采销'
      }, {
        value: 1,
        label: '服务费'
      }],
      cooperationStatusOptions: [{
        value: 0,
        label: '合作中'
      }, {
        value: 1,
        label: '已终止'
      }, {
        value: 2,
        label: '待续签'
      }],
      isSignOptions: [{
        value: 0,
        label: '否'
      }, {
        value: 1,
        label: '是'
      }],
      editSupplierRules: {
        supplierNum: [{ required: true, trigger: 'blur', message: '请输入供应商序号' }],
        supplierName: [{ required: true, trigger: 'blur', message: '请输入供应商名称' }],
        isSign: [{ required: true, trigger: 'change', message: '请选择是否签约' }]
      },
      loading: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    canEdit() {
      return !!(this.supplierId && !this.hasRouteAuth('crm:commerceSupplier:editSupplierName'));
    }
  },
  created() {
    this.supplierId = Number(this.$route.params.id) || '';
    if (this.supplierId) {
      this.title = '编辑供应商';
      this.getInfo();
    } else {
      this.title = '新增供应商';
    }
  },
  methods: {
    hasRouteAuth,
    getInfo() {
      supplierInfo(this.supplierId).then(res => {
        this.editSupplierFrom = res.data;
        // this.editSupplierFrom.expireTime = this.editSupplierFrom.expireTime ? this.editSupplierFrom.expireTime * 1000 : null;
      }).catch(err => {
        console.error(err);
      });
    },
    add() {
      supplierAdd(this.editSupplierFrom).then(res => {
        this.loading = false;
        this.$message.success('添加成功');
        if (this.pageType === 'component') {
          this.$emit('submit', { id: res.data, name: this.editSupplierFrom.supplierName });
          return;
        }
        this.$router.push({
          name: 'commerceSupplier'
        });
      }, result => {
        this.loading = false;
      }).catch(err => {
        console.error(err);
      });
    },
    edit() {
      supplierEdit(this.supplierId, this.editSupplierFrom).then(res => {
        this.loading = false;
        this.$message.success('修改成功');
        this.$router.push({
          name: 'commerceSupplier'
        });
      }, result => {
        this.loading = false;
        // this.$message.error(result.message);
      }).catch(err => {
        console.error(err);
      });
    },
    toSubmit() {
      if (!this.supplierId) {
        this.loading = true;
        this.add();
      } else {
        this.loading = true;
        this.edit();
      }
    },
    toSave(formValue) {
      this.$refs[formValue].validate((vaild) => {
        if (vaild) {
          // this.editSupplierFrom.expireTime = this.editSupplierFrom.expireTime ? this.editSupplierFrom.expireTime / 1000 : null;
          this.toSubmit();
        } else {
          return false;
        }
      });
    },
    toClear() {
      this.$router.push({
        name: 'commerceSupplier'
      });
    },
    keyupEvent(value, name) {
      const str = regNumberMax(value, 100, true);
      this.editSupplierFrom[name] = str;
    },
    getData(value) {
      let str = value.replace(/[^\d-]+/g, '');
      str = str.replace(/\-{2,}/g, '-'); // 不能多个负号 replace为-
      str = str.replace(/^(\d*)\-(\d*)\-/g, '-$1$2');// 不连续-- 删掉后面一个-
      str = str.replace(/^\-0[^\.]+/g, '-0'); // -后连续多个0 replace为1个0
      this.editSupplierFrom.supplierNum = str;
    },
    getNameData(value, name) {
      const str = value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '');
      this.editSupplierFrom[name] = str;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.commerce-supplier-create {
  min-height: calc(100vh - 90px);
  padding: 24px;
  margin: 16px 16px 30px 16px;
  background-color: #fff;
  .hover-icon{
    position: absolute;
    top: 9px;
    left: 245px;
  }
  .label-line {
    .el-form-item__label {
      line-height: 1.1 !important;
    }
  }
  .commerce-supplier-form {
    .indentation-form-item {
      .el-form-item {
        label {
          line-height: 1.2 !important;
        }
      }
    }
    .el-form {
      .el-input {
        width: 240px;
      }
      .el-form-item {
        margin-bottom: 24px;
        .el-input__icon {
          line-height: 24px;
        }
        .el-input__inner, .el-date-editor {
          width: 240px !important;
        }
      }
      .el-select .el-input .el-select__caret {
        color: #333;
      }
      .content {
        .el-textarea__inner{
          width: 240px;
          height: 64px;
        }
      }
    }
  }
  &.mobile-create {
    .commerce-supplier-form {
      .el-form {
        .el-form-item {
          .el-form-item__content {
            width: calc(100% - 100px);
          }
          .el-input__inner, .el-date-editor {
            width: 100% !important;
          }
        }
      }
    }
    .mobile-pagination {
      .el-button {
        flex: 1;
      }
    }
  }
}
</style>
<style lang="scss">
.createDayAccountwidth240 {
  width: 240px;
}
</style>
